<template>
  <div class="m-newbusines">
    <el-steps :active="state.active" finish-status="success">
      <el-step title="规则信息"></el-step>
      <el-step title="收费项"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <div class="step1" v-show="state.active === 0">
      <el-form
        :model="state.ruleForm"
        :rules="state.rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <span>规则信息</span>
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="state.ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="规则描述" prop="desc">
          <el-input
            type="textarea"
            v-model="state.ruleForm.desc"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="step2" v-show="state.active === 1">
      <div class="topgroup">
        <p>该规则已被使用，不可修改收费项</p>
        <p>收费项</p>
      </div>
      <el-table :data="state.step2Data" border style="width: 100%">
        <el-table-column
          v-for="item in state.step2Cols"
          :key="item.index"
          :prop="item.props"
          :label="item.label"
        >
        </el-table-column>
      </el-table>

      <!-- 弹出框 -->
      <Dialog :showDialog="state.isshow" @close="getClose" Title="新增收费项">
        <template #content>
          <div class="content_form">
            <el-form
              :model="state.ruleForm"
              :rules="state.rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              size="mini"
            >
              <div class="dialog_item">
                <el-form-item label="收费项名称" prop="name">
                  <el-input
                    v-model="state.ruleForm.name"
                    style="width:150px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="收费类型" prop="region">
                  <el-select
                    v-model="state.ruleForm.region"
                    placeholder="请选择收费类型"
                    style="width:150px"
                  >
                    <el-option label="按单收费" value="week"></el-option>
                    <el-option label="按支付金额" value="month"></el-option>
                    <el-option label="按订单金额" value="year"></el-option>
                    <el-option label="按退款金额" value="year"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="dialog_item">
                <el-form-item label="最低收费" prop="name">
                  <el-input
                    v-model="state.ruleForm.name"
                    style="width:150px"
                  ></el-input
                  >元
                </el-form-item>
                <el-checkbox name="type"></el-checkbox>
                <el-form-item label="最高收费" prop="name">
                  <el-input
                    v-model="state.ruleForm.name"
                    style="width:150px"
                  ></el-input
                  >元
                </el-form-item>
              </div>
            </el-form>
          </div>
          <el-table :data="state.newCharge" border style="width: 100%">
            <el-table-column
              v-for="item in state.newChargeClos"
              :key="item.index"
              :prop="item.props"
              :label="item.label"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <i
                  class="el-icon-delete"
                  @click="deleteitemDialog(scope.$index, tableData)"
                ></i>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Dialog>
    </div>
    <div class="step3" v-show="state.active === 2"  style="width: 100%">
      <p>规则名称:生产厂家</p>
      <p>规则描述:适用于生产企业</p>
      <p>收费项</p>
      <el-table :data="state.step3Data" border>
        <el-table-column
          v-for="item in state.step3Clos"
          :key="item.index"
          :prop="item.props"
          :label="item.label"
        >
        </el-table-column>
      </el-table>

    </div>
    <div class="btn_group">
        <el-button type="primary" @click="last" v-if="state.active !== 0"
            >上一步</el-button
        >
        <el-button type="primary" @click="next" v-if="state.active !== 2"
            >下一步</el-button
        >
        <el-button type="primary" v-if="state.active == 2">完成</el-button>         
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import Dialog from "../components/dialog.vue";
export default {
    components: { Dialog },
  setup() {
      
    let state = reactive({
      active: 0,
      isshow: false,
      rules: {
        name: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
        desc: [{ required: true, message: "请填写规则描述", trigger: "blur" }],
        region: [
          { required: true, message: "请选择结算周期", trigger: "change" },
        ],
      },
      ruleForm: {
        name: "",
        desc: "",
        region: "",
      },
      step2Data: [
      ],
      step2Cols: [
        {
          props: "name",
          label: "收费项",
        },
        {
          props: "age",
          label: "收费类型",
        },
        {
          props: "and",
          label: "收费金额",
        },
      ],
      step3Data: [

      ],
      step3Clos: [
        {
          props: "name",
          label: "收费项",
        },
        {
          props: "count",
          label: "收费类型",
        },
        {
          props: "charge",
          label: "收费金额",
        },
      ]
    });
    //下一步
    function next() {
      if (state.active++ > 2) state.active = 0;
    }
    //上一步
    function last() {
      if (state.active-- == 0) state.active = 2;
    }
    // 编辑当前项目
    function edititem() {}
    //删除当前项
    function deleteitem() {}
    function getClose(prams) {
      state.isshow = prams;
    }
    return {
      state,
      next,
      last,
      edititem,
      deleteitem,
      getClose,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-steps {
  width: 60%;
}
.m-newbusines {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-start;
  align-content: center;
    .step_div{
    flex: 1;
  }
  .step1 {
      flex: 8;
    width: 50%;
  }
  .step2 {
    flex: 8;
    .topgroup {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 10px 0;
    }
  }
  .step3 {
        flex: 8;

  }
  .btn_group {
      flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

.dialog_item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>
